<!--********************************************************************
* Copyright© 2000 - 2018 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link rel='stylesheet' href='../../mapbox-gl.css' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        .mapboxgl-marker {
            width: 10px;
            height: 10px;
            background: red;
            margin-top: -5px;
            margin-left: -5px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id='map'></div>
    <script src="../../libs/jquery.min.js"></script>
    <script type="text/javascript" src="../../mapbox-gl-dev.js"></script>
    <script type="text/javascript" src="../../libs/deckgl/deck.gl.js"></script>
    <script type="text/javascript" src="../../iclient9-mapboxgl.js"></script>
    <script type="text/javascript">
        var map = new mapboxgl.Map({
            container: 'map', // container id
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "type": "raster",
                        "tiles": ['http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}'],
                        "tileSize": 256
                    }
                },

                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 22
                }]
            },
            crs: mapboxgl.CRS.EPSG4326,
            center:[-122.28293365065224,37.924513609424366],
            //center: [-122.271604, 37.803664],
            zoom: 11
        });
        $.get('../../data/bart-lines.json', function (features) {
            addLayer(features);
        });


        function addLayer(features) {

            deckglLayer = new mapboxgl.supermap.DeckglLayer("path-layer", {
                data: features,
                props: {
                    widthScale: 20, //线宽比例
                    widthMinPixels: 2, //线宽最小像素值
                    coordinateSystem:3,
                    onHover: function(feature) {
                    console.log(feature)
                }
                    //该类型可配置的其他参数有：
                    //widthMaxPixels  线宽最大像素值，默认为 Number.MAX_SAFE_INTEGER；
                    //rounded  节点是否绘制为弧形，可选参数，默认为 false；
                    //miterLimit  节点相对于线宽的最大范围，默认为 4，仅在 rounded 为 false 时有效；
                    //fp64  否应以高精度64位模式呈现图层，默认为 false；
                    //dashJustified 是否虚线形式显示，默认为 false，仅在 getDashArray() 回调函数被指定时有效；
                },
                callback: {
                    getPath: d => d.path,
                    getColor: d => d.color.colorRgb(),
                    getWidth: d => 5,
                }
            });
            map.addLayer(deckglLayer);
        }

        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        /*16进制颜色转为RGB格式*/
        String.prototype.colorRgb = function () {
            var sColor = this.toLowerCase();
            if (sColor && reg.test(sColor)) {
                if (sColor.length === 4) {
                    var sColorNew = "#";
                    for (var i = 1; i < 4; i += 1) {
                        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
                    }
                    sColor = sColorNew;
                }
                //处理六位的颜色值
                var sColorChange = [];
                for (var i = 1; i < 7; i += 2) {
                    sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
                }
                return sColorChange;
            } else {
                return sColor;
            }
        }

    </script>

</body>

</html>
